<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>交易中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/comm.css" />
		<link rel="stylesheet" type="text/css" href="css/fakeLoader.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />

		<!--<script src="test/lib/config.js"></script>
		<script src="test/lib/jquery.min.js"></script>
		<link rel="stylesheet" href="test/lib/reset.css" />-->
		<style>
			@media only screen and (min-width: 100px) and (max-width: 640px) {
				
			}
			.split {
				line-height: 60px;
				height: 60px;
				background: #FF0000;
				text-align: center;
				font-weight: bold;
				font-size: 20px;
				color: #fff;
			}
			
			.block {
				position: relative;
			}
			
			body {
				background: #555;
			}
			
			body .main {
				height: 550px;
			}
			
			.panel {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 200px;
				background: #FF0000;
				color: #fff;
				font-size: 14px;
				font-weight: normal;
				padding: 10px;
			}
			
			ul.panel-desc {
				padding-left: 20px;
				padding-bottom: 10px;
				border-bottom: 1px solid #777;
			}
			
			ul.panel-desc li {
				margin-bottom: 5px;
			}
			
			h3 {
				font-size: 14px;
			}
			
			#main2 {
				height: 450px;
			}
			
			#main2-st {
				position: relative;
				height: 200px;
			}
			
			strong {
				background: yellow;
				padding: 0 2px;
				border-radius: 2px;
				color: #000;
			}
			
			#main1-st {
				position: absolute;
				top: 0;
				right: 300px;
				height: 550px;
				width: 400px;
				z-index: 999;
			}
			
			.sm-settings {
				border-bottom: 1px solid #777;
				padding-bottom: 15px;
			}
			
			.sm-settings input {
				max-width: 50px;
			}
			
			.main div:nth-child(2) {
				top: 21px !important;
				display: block !important;
				left: 0px !important;
				width: 100%;
				padding-left: 21px !important;
				background-color: transparent !important;
				word-wrap: break-word;
				font-size: 12px !important;
				z-index: 2 !important;
				color: rgb(245, 235, 235) !important;
			}
			
			.kaiguai {
				position: absolute;
				left: 8px;
				background-color: #484848;
			}
			
			.ma5ma {
				display: inline-block;
				display: inline-block;
				position: absolute;
				left: 0;
				top: 22px;
			}
			
			.ma5ma span:nth-child(2) {
				top: 0px;
				left: 113px;
			}
			
			.ma5ma span span {
				background-color: transparent !important;
			}
			
			.e_bq {
				background-color: #4c4c7b;
				position: absolute;
				left: 0px;
			}
			
			.e_bq span {
				background-color: #4c4c7b !important;
			}
			.buyuo{height: 104px;width: 99%;position: absolute;bottom: 116px;left: 2px;}
		</style>

	</head>
	<!--color:#383961-->

	<body>
		<div class="container-fluid" style="background-color: #424275;">
			<div class="fakeloader"></div>
			<div class="row hao " style="background-color: #383961;">
				<div class="hao_div">
					<div class="col-lg-5 col-md-5 col-xs-6 col-sm-5 animated slideInDown jyck">
						<div class="logo_ck ">
							<img class="logo" src="img/logo.png" /><span class="ck">CK</span>
						</div>
					</div>
					<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6 caid animated slideInDown"><img id="caid" src="img/cai.png" /></div>
					<div class="col-lg-7 col-md-7 caid1 animated slideInDown dhl_dh" style="height: 60px;">
						<ul class="dtlul" style="color: #fff;">
							<li class="shybj">
								<a href="index.html">首页</a>
							</li>
							<li id="dhl">
								<a href="core.html" style="color: #d51e87;">交易中心</a>
							</li>
							<li id="dhl1">
								<a href="entrust.html">委托</a>
							</li>
							<li id="dhl2">
								<a href="user.html">用户中心</a>
							</li>
							<li id="dhl3">
								<a href="news.html">资讯</a>
							</li>
							<li id="switch" class="switch1" style="border-bottom: 0px solid;">
								<span class="yuy">简体</span> 
								
							</li>
							<li id="dhl4">
								<a href="sign.html">登录/注册</a>
							</li>
						</ul>
					</div>
					<div class="heip">
						<div class="text-right">
							<div class="dax"><img style="width: 30px" src="img/xx1.png" /></div>
						</div>
					</div>
					<div class="show_dhl">
						<ul class="dtlu2">
							<li class="shybj">
								<a href="index.html">首 &nbsp;&nbsp;&nbsp;&nbsp;页</a>
							</li>
							<li id="dhl" class="shybj">
								<a href="core.html">交易中心</a>
							</li>
							<li id="dhl1" class="shybj">
								<a href="entrust.html">委托</a>
							</li>
							<li id="dhl2" class="shybj">
								<a href="user.html">用户中心</a>
							</li>
							<li id="dhl3" class="shybj">
								<a href="news.html">资 &nbsp;&nbsp;&nbsp;&nbsp;讯</a>
							</li>
							<li class="shybj"><span id="switch1">英文</span>
							</li>
							<li class="shybj" id="dhl4">
								<a href="sign.html">登录/注册</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="container-fluid" style="max-width: 1058px;">
				<div class="row">
					<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12" style="color: #FFF;padding: 0;">
						<div class="switch swicor">
							<input id="ft" type="button" value="繁体" onclick="zh_tran('t');" />
							<input id="jt" type="button" value="简体" onclick="zh_tran('s');" />
							<input id="yw" type="button" value="English" />
						</div>
						<div>
							<div class="bxe">
								<div>BTC</div>
								<div class="xrp1">XRP</div>
								<div>ETC</div>
							</div>
							<div class="xxing">
								<div>
									<span>量：</span><span style="font-size: 26px;">1926.07</span><br />
									<span>+26.09</span> <span> +1.37%</span>
								</div>
								<div>
									<span class="shuzi zi_1">1901.18</span><br />
									<span class="fontzi">最新买入价</span>
								</div>
								<div>
									<span class="shuzi zi_1">1901.18</span><br />
									<span class="fontzi">最新卖出价</span>
								</div>
								<div>
									<span class="shuzi zi_2">1901.18</span><br />
									<span class="fontzi">开盘价</span>
								</div>
								<div>
									<span class="shuzi zi_2">1901.18</span><br />
									<span class="fontzi">收盘价</span>
								</div>
								<div>
									<span class="shuzi zi_3">1901.18</span><br />
									<span class="fontzi">最高价</span>
								</div>
								<div>
									<span class="shuzi zi_3">1901.18</span><br />
									<span class="fontzi">最低价</span>
								</div>
							</div>

							<div class="date">
								<div>分时</div>
								<div>五日</div>
								<div>日K</div>
								<div>周K</div>
								<div class="xrp">月K</div>
								<div>分钟</div>
							</div>
							
							
						</div>

					</div>
				</div>

				<div class="row bjys">
					<div class="col-lg-12 col-xs-12 col-sm-12 col-md-12 padle">

					</div>
					<div class="col-lg-12 col-xs-12 col-sm-12 col-md-12 kxt">
						<div class="kxtu" style="width: 100%;">
							<div class="block" style="width: 100%;">
								<div id="main1" class="main" style="width: 100%;"></div>
							</div>
							<div class="block"></div>
						</div>
					</div>
				</div>
				<div class="buyuo">
					
				</div>
				<!--<div class="row manm_box"></div>-->

				<div class="row occ_row">
					<div class="col-lg-5 col-md-5 col-xs-12 col-sm-12 jyzhx">

						<div class="jyzhx_zuix">
							<div class="solidjy">
								<div class="solidjy_div"><b>交易中心 </b><span class="occ"> (CK)</span></div>

							</div>
							<div>
								<div class="psp4">
									<p>总额： <span>12589.3</span></p>
									<p>冻结：<span>0.00</span></p>
									<p>可用：12589.3</p>
									<p>信用值：0.00</p>
								</div>
							</div>
							<div id="demo">
								<div class="i_box">
									<button href="javascript:;" class="J_minus">-</button>
									<input type="text" value="" class="J_input" placeholder="价格" />
									<button href="javascript:;" class="J_add">+</button>
								</div>
								<br /><br />
								<div class="i_box">
									<button href="javascript:;" class="J_minus">-</button>
									<input type="text" value="" class="J_input" placeholder="数量" />
									<button href="javascript:;" class="J_add">+</button>
								</div>
							</div>
							<br />
							<div>
								<div class="shxf_box">
									<div> <span class="zjspan">总金额:<span class="zjspan_1"> 0.00000</span></span><span class="shxf">手续费：<span>0.00</span></span>
									</div>
								</div>
							</div>
							<br />
							<div class="text-center">
								<div style="padding-bottom: 15px;">
									<button class="jybtn">交易密码</button>
								</div>
							</div>
							<div>
								<div class="btn_5">
									<button>全仓</button>
									<button>半仓</button>
									<button>1/3仓</button>
									<button>3/2仓</button>
									<button>1/4仓</button>
								</div>
							</div>

							<div class="btys_box">
								<button class="btng btys">买入</button><button class="btng btys1">卖出</button>
							</div>
						</div>
					</div>
					<!--<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12 backff">
						<div>
							<div class="borsld">
								<h3 class="text-center">最近卖出</h3>
								<ul>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
								</ul>

							</div>
						</div>
					</div>

					<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12 backff">
						<div>
							<div class="borsld">
								<h3 class="text-center">最近买入</h3>
								<ul>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
									<li>
										<div>价格：<span>0.00</span></div>
										<div>总量：<span>0.00</span></div>
										<div>余量：<span>0.00</span></div>
										<div>剩余百分比：<span>100%</span></div>
									</li>
								</ul>
							</div>
						</div>
					</div>-->

					<div class="col-lg-7 col-md-7 col-xs-12 col-sm-12 lepa">
						<div style="padding: 12px 0px;background-color: #4c4c7b;">
							<div class="xiasid">
								<span>最新交易</span>
								<div class="maimai">
									最新卖、买 <span>/ 最新交易记录</span>
								</div>

							</div><br />
							<div>
								<table border="1" cellspacing="" cellpadding="" style="width: 100%;" class="tablebt">
									<tr style="color: #f8f9fb;">
										<th class="th_tao1">
											<div>类型</div>
										</th>
										<th class="th_tao2">
											<div>价格</div>
										</th>
										<th class="th_tao3">
											<div>总量</div>
										</th>
										<th class="th_tao4">
											<div>余单价</div>
										</th>
										<th colspan="2" style="text-align: center;">

											<div>操作</div>
										</th>
									</tr>
								</table>
								<div style="height: 314px;overflow: auto;">
									<table border="1" cellspacing="" cellpadding="" class="table_box">
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖1</div>
											</td>
											<td style="width: 18%;">
												<div>14.03</div>
											</td>
											<td style="width: 17%;">
												<div>50.0</div>
											</td>
											<td style="width: 17%;">
												<div>22.0</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖2</div>
											</td>
											<td style="width: 18%;">
												<div>14.03</div>
											</td>
											<td style="width: 17%;">
												<div>50.0</div>
											</td>
											<td style="width: 17%;">
												<div>22.0</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖3</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖4</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖5</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖6</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖7</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖8</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖9</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖10</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖11</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖12</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
										<tr>
											<td style="width: 10%;">
												<div class="co53b98f">卖13</div>
											</td>
											<td style="width: 18%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td style="width: 17%;">
												<div>0.00</div>
											</td>
											<td colspan="2">
												<div class="jitu">
													<div class="jitu_div"></div>
												</div>
												<div><button class="btnbuy">SELL</button></div>
											</td>
										</tr>
									</table>
								</div>
							</div>

							<div style="height: 298px;overflow: auto;">
								<table border="1" cellspacing="" cellpadding="" class="table_box">
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖1</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖2</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖3</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖4</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖5</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖6</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖7</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖8</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖9</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖10</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖11</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖12</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
									<tr>
										<td style="width: 10%;">
											<div class="coea4a48">卖13</div>
										</td>
										<td style="width: 18%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td style="width: 17%;">
											<div>0.00</div>
										</td>
										<td colspan="2">
											<div class="jitu">
												<div class="jitu_div1"></div>
											</div>
											<div><button class="btnbuy">BUY</button></div>
										</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>

				<div class="row zuix">
					<div class="col-lg-12 col-xs-12 col-md-12 col-sm-12" style="padding: 0;">
						<div style="padding: 12px 0px;background-color: #4c4c7b;">
							<div class="xiasid">
								<span>当前委托</span>

							</div><br />
							<div>
								<!--<table border="1" cellspacing="" cellpadding="" style="width: 100%;" class="tablebt">
									<tr style="color: #f8f9fb; text-align: center !important;">
										<th class="current_1">
											<div>时间</div>
										</th>
										<th class="current_1" >
											<div>类别</div>
										</th>
										<th class="current_1" >
											<div>价格</div>
										</th>
										<th class="current_1">
											<div>数量</div>
										</th>
										<th class="current_1">
											<div>已成交</div>
										</th>
										<th class="current_1">
											<div>未成交</div>
										</th>
										<th class="current_1">
											<div>状态</div>
										</th>
										<th class="current_1">
											<div>操作</div>
										</th>
									</tr>
								</table>-->
								<div style="height: 314px;overflow: auto;">
									<table border="1" class="table_box" style="width: 1058px;">
										<tr style="color: #f8f9fb;  background-color: #575581;">
											<th class="current_1">
												<div>时间</div>
											</th>
											<th class="current_1">
												<div>类别</div>
											</th>
											<th class="current_1">
												<div>价格</div>
											</th>
											<th class="current_1">
												<div>数量</div>
											</th>
											<th class="current_1">
												<div>已成交</div>
											</th>
											<th class="current_1">
												<div>未成交</div>
											</th>
											<th class="current_1">
												<div>状态</div>
											</th>
											<th class="current_1" style="width: 200px;">
												<div>操作</div>
											</th>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="succeed">卖出</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="succeed">成功</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="succeed">卖出</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="transaction">交易中</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="succeed">卖出</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="fail">失败</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="fail">买入</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="fail">失败</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="fail">买入</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="succeed">成功</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="succeed">卖出</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="succeed">成功</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="fail">买入</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="succeed">成功</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="fail">买入</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="succeed">成功</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="fail">买入</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="succeed">成功</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="fail">买入</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="succeed">成功</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="fail">买入</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="succeed">成功</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
										<tr>
											<td class="current_1">
												<div>2018-05-29 15:53</div>
											</td>
											<td class="current_1">
												<div class="fail">买入</div>
											</td>
											<td class="current_1">
												<div>25.6</div>
											</td>
											<td class="current_1">
												<div>50.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div>25.00</div>
											</td>
											<td class="current_1">
												<div class="succeed">成功</div>
											</td>
											<td class="current_1">
												<div><button class="btnbuy">撤回</button></div>
												<div><button class="btnbuy">确定</button></div>
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="row zuix">
					<div class="col-lg-12 col-xs-12 col-md-12 col-sm-12" style="padding: 0;">
						<div style="padding: 12px 0px;background-color: #4c4c7b;">
							<div class="xiasid">
								<span>成交记录</span>

							</div><br />
							<div>
								<!--<table border="1" cellspacing="" cellpadding="" style="width: 100%;" class="tablebt">
									<tr style="color: #f8f9fb; text-align: center !important;">
										<th class="current_1">
											<div>时间</div>
										</th>
										<th class="current_1" >
											<div>类别</div>
										</th>
										<th class="current_1" >
											<div>价格</div>
										</th>
										<th class="current_1">
											<div>数量</div>
										</th>
										<th class="current_1">
											<div>已成交</div>
										</th>
										<th class="current_1">
											<div>未成交</div>
										</th>
										<th class="current_1">
											<div>状态</div>
										</th>
										<th class="current_1">
											<div>操作</div>
										</th>
									</tr>
								</table>-->
								<div style="height: 314px;overflow: auto;">
									<table border="1" class="table_box" style="width: 1058px;">
										<tr style="color: #f8f9fb;  background-color: #575581;">
											<th class="current_2" style="width: 200px;">
												<div>时间</div>
											</th>
											<th class="current_2">
												<div>类别</div>
											</th>
											<th class="current_2">
												<div>价格</div>
											</th>
											<th class="current_2">
												<div>数量</div>
											</th>
											<th class="current_2">
												<div>已成交</div>
											</th>
											
											<th class="current_2">
												<div>状态</div>
											</th>
										
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td>
												<div class="succeed">卖出</div>
											</td>
											<td>
												<div>25.6</div>
											</td>
											<td>
												<div>50.00</div>
											</td>
											<td >
												<div>25.00</div>
											</td>
											
											<td>
												<div class="succeed">成功</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td >
												<div class="succeed">卖出</div>
											</td>
											<td>
												<div>25.6</div>
											</td>
											<td>
												<div>50.00</div>
											</td>
											<td>
												<div>25.00</div>
											</td>
											
											<td>
												<div class="transaction">交易中</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td>
												<div class="succeed">卖出</div>
											</td>
											<td>
												<div>25.6</div>
											</td>
											<td>
												<div>50.00</div>
											</td>
											<td>
												<div>25.00</div>
											</td>
											
											<td>
												<div class="fail">失败</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td>
												<div class="fail">买入</div>
											</td>
											<td>
												<div>25.6</div>
											</td>
											<td>
												<div>50.00</div>
											</td>
											<td>
												<div>25.00</div>
											</td>
											
											<td>
												<div class="fail">失败</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td>
												<div class="fail">买入</div>
											</td>
											<td>
												<div>25.6</div>
											</td>
											<td >
												<div>50.00</div>
											</td>
											<td>
												<div>25.00</div>
											</td>
											
											<td>
												<div class="succeed">成功</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td>
												<div class="succeed">卖出</div>
											</td>
											<td>
												<div>25.6</div>
											</td>
											<td>
												<div>50.00</div>
											</td>
											<td>
												<div>25.00</div>
											</td>
											
											<td>
												<div class="succeed">成功</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td>
												<div class="fail">买入</div>
											</td>
											<td >
												<div>25.6</div>
											</td>
											<td>
												<div>50.00</div>
											</td>
											<td>
												<div>25.00</div>
											</td>
											
											<td>
												<div class="succeed">成功</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td>
												<div class="fail">买入</div>
											</td>
											<td>
												<div>25.6</div>
											</td>
											<td>
												<div>50.00</div>
											</td>
											<td>
												<div>25.00</div>
											</td>
											
											<td>
												<div class="succeed">成功</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td>
												<div class="fail">买入</div>
											</td>
											<td>
												<div>25.6</div>
											</td>
											<td>
												<div>50.00</div>
											</td>
											<td>
												<div>25.00</div>
											</td>
										
											<td>
												<div class="succeed">成功</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td>
												<div class="fail">买入</div>
											</td>
											<td >
												<div>25.6</div>
											</td>
											<td >
												<div>50.00</div>
											</td>
											<td >
												<div>25.00</div>
											</td>
											
											<td >
												<div class="succeed">成功</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td >
												<div class="fail">买入</div>
											</td>
											<td >
												<div>25.6</div>
											</td>
											<td >
												<div>50.00</div>
											</td>
											<td >
												<div>25.00</div>
											</td>
											
											<td >
												<div class="succeed">成功</div>
											</td>
											
										</tr>
										<tr>
											<td>
												<div>2018-05-29 15:53</div>
											</td>
											<td >
												<div class="fail">买入</div>
											</td>
											<td>
												<div>25.6</div>
											</td>
											<td>
												<div>50.00</div>
											</td>
											<td>
												<div>25.00</div>
											</td>
											
											<td>
												<div class="succeed">成功</div>
											</td>
											
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

			<br />
			<!--<div class="liao">
				<img src="img/liao.png" />
			</div>-->

			<div class="row text-center hei">
				<div>
					Copyright © 2015-2018 ALL Rights Reserved..粵ICP备16082210号-3
				</div>
			</div>
		</div>
		</div>

		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/font.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/fakeLoader.min.js"></script>
		<script src="test/lib/esl.js"></script>
		<!--<script>
			var chart;
			var data;
			var panel;
			var upColor = '#00da3c';
			var downColor = '#ec0000';
			require([
				'echarts',
				'stock-DJI.json'
			], function(echarts, rawData) {

				chart = echarts.init(document.getElementById('main1'), null, {

				});
				panel = document.getElementById('panel1');
				data = splitData(rawData);
				update();

				//              chart.on('click', function (info) {
				//                  if (info.data && info.componentType === 'series') {
				//                      alert([
				//                          'clicked on: ',
				//                          'DATA: ' + info.name,
				//                          'OPEN: ' + info.data[0],
				//                          'CLOSE: ' + info.data[1],
				//                          'LOWEST: ' + info.data[2],
				//                          'HIGHEST: ' + info.data[3],
				//                          'VOLUMN: ' + info.data[4]
				//                      ].join('\n'));
				//                  }
				//              });
			})

			function splitData(rawData) {
			    var categoryData = [];
			    var values = [];
			    var volumes = [];
			    for (var i = 0; i < rawData.length; i++) {
			        categoryData.push(rawData[i].splice(0, 1)[0]);
			        values.push(rawData[i]);
			        volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
			    }
			
			    return {
			        categoryData: categoryData,
			        values: values,
			        volumes: volumes
			    };
			}

			function calculateMA(dayCount, data) {
				var result = [];
				for(var i = 0, len = data.values.length; i < len; i++) {
					if(i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for(var j = 0; j < dayCount; j++) {
						sum += data.values[i - j][1];
					}
					result.push(+(sum / dayCount).toFixed(3));
				}
				return result;
			}

			function update() {

				//外围字体和颜色
				chart.setOption({
					backgroundColor: '#4c4c7b',

					textStyle: {
						color: '#fff'
					},
					animation: false,
					legend: {
						left: 0,
						data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30'],
						textStyle: {
							color: '#fff'
						},
					},

					//鼠标移动显示信息
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
						}
					},
					//                  toolbox: {
					//                      feature: {
					//                          dataZoom: {
					//                              yAxisIndex: false
					//                          },
					//                        brush: {
					//                            type: ['polygon', 'rect', 'lineX', 'lineY', 'keep', 'clear']
					//                       }
					//                      }
					//                  },

					//透明框
					brush: {
						xAxisIndex: 'all',
						brushLink: 'all',

						outOfBrush: {

							colorAlpha: 0.1,

						}
					},
					 visualMap: {
				            show: false,
				            seriesIndex: 5,
				            dimension: 2,
				            pieces: [{
				                value: 1,
				                color: downColor
				            }, {
				                value: -1,
				                color: upColor
				            }]
				        },
					//调整边缘大小的
					grid: [{
							left: '0.5%',
							right: '0.5%',
							height: 330,
							bottom: 145
						},
						{
							//调整下面边缘大小的
							left: '2%',
							right: '2%',
							height: 70,
							bottom: 10
						}
					],

					xAxis: [
			            {
			            	
			                type: 'category',
			                data: data.categoryData,
			                scale: true,
			                boundaryGap : false,
			                globalCoord: true,
			                axisLine: {onZero: true},
			                splitLine: {show: false},
			                splitNumber: 20,
			                min: 'dataMin',
			                max: 'dataMax',
			                axisPointer: {
			                    z: 100
			                }
			            },
			            {
			            	
			                type: 'category',
			                gridIndex: 1,
			                data: data.categoryData,
			                scale: true,
			                boundaryGap : false,
			                globalCoord: true,
			                axisLine: {onZero: false},
			                axisTick: {show: false},
			                splitLine: {show: false,},
			                axisLabel: {show: false},
			                splitNumber: 20,
			                min: 'dataMin',
			                max: 'dataMax'
			                // axisPointer: {
			                //     label: {
			                //         formatter: function (params) {
			                //             var seriesValue = (params.seriesData[0] || {}).value;
			                //             return params.value
			                //             + (seriesValue != null
			                //                 ? '\n' + echarts.format.addCommas(seriesValue)
			                //                 : ''
			                //             );
			                //         }
			                //     }
			                // }
			            }
			        ],
					yAxis: [{
							scale: true,
							"show":false
							
						},
						{
							scale: false,
							gridIndex: 1,
							splitNumber: 2,
							axisLabel: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: false
							}

						}
					],
					dataZoom: [
						//放大缩小的
						{
							type: 'inside',
//							xAxisIndex: [0, 1],
							start: 98,
							end: 100

						},

						{
							//显示放大缩小的进度条
							show: false,
							xAxisIndex: [0, 1],
							type: 'slider',
							bottom: 10,
							start: 98,
							end: 100,
						}

					],
					series: [{
							name: 'Dow-Jones index',
							type: 'candlestick',

							data: data.values,
							itemStyle: {
								normal: {
									borderColor: upColor,
									borderColor0: downColor,
									backgroundColor: null,
									backgroundColor0: null,
								}
							},
							tooltip: {
								
								formatter: function(param) {
								var param = param[0];
									return [
									'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
									'Open: ' + param.data[0] + '<br/>',										'Close: ' + param.data[1] + '<br/>',
										'Lowest: ' + param.data[2] + '<br/>',
										'Highest: ' + param.data[3] + '<br/>'
									].join('')
								}
							}
						},
						{
							name: 'MA5',
							type: 'line',
							data: calculateMA(5, data),
							symbol: 'none', //去掉小圆点
//							color: '#000',
							smooth: true,
							lineStyle: {
								normal: {
									opacity: 1
								}
							}
						},
						{
							name: 'MA10',
							type: 'line',
							data: calculateMA(10, data),
							symbol: 'none', //去掉小圆点
							smooth: true,
							lineStyle: {
								normal: {
									opacity: 1
								}
							}
						},
						{
							name: 'MA20',
							type: 'line',
							data: calculateMA(20, data),
							symbol: 'none', //去掉小圆点
							smooth: true,
							lineStyle: {
								normal: {
									opacity: 1
								}
							}
						},
						{
							name: 'MA30',
							type: 'line',
							data: calculateMA(30, data),
							symbol: 'none', //去掉小圆点
							smooth: true,
							lineStyle: {
								normal: {
									opacity: 1
								}
							}
						},

						//显示下面的山图
						{
							name: 'Volumn',
							type: 'bar',
//							color: '#fff',
							xAxisIndex: 1,
							yAxisIndex: 1,
							data: data.volumns
						}
					]
				},true);

/*				chart.on('brushSelected', renderBrushed);

				function renderBrushed(params) {
					var sum = 0;
					var min = Infinity;
					var max = -Infinity;
					var countBySeries = [];
					var brushComponent = params.batch[0];

					var rawIndices = brushComponent.selected[0].dataIndex;
					for(var i = 0; i < rawIndices.length; i++) {
						var val = data.values[rawIndices[i]][1];
						sum += val;
						min = Math.min(val, min);
						max = Math.max(val, max);
					}*/

					//                  panel.innerHTML = [
					//                      '<h3>STATISTICS:</h3>',
					//                      'SUM of open: ' + (sum / rawIndices.length).toFixed(4) + '<br>',
					//                      'MIN of open: ' + min.toFixed(4) + '<br>',
					//                      'MAX of open: ' + max.toFixed(4) + '<br>'
					//                  ].join(' ');

//				}

//				chart.dispatchAction({
//					type: 'brush',
//					areas: [
//
//						{
//							brushType: 'lineX',
//							//控制默认透明框大小
//							color:'#fff',
//							coordRange: [],
//							xAxisIndex: 0,
//							smooth: false
//							
//						}
//					]
//				});
			}
		</script>
	-->
	<style type="text/css">
		.ma5{}
		.ma10{color: #5858fd;}
		.ma20{color: #f4abf5;}
		.ma30{color: #c5f10a;}
		.vol{}
		.dea{color: #c5f10a;}
	</style>
	<script type="text/javascript">
		
			var chart;
			var data;
			var panel; 
			var upColor = 'transparent';
			var downColor = '#d81010';
			var upBorderColor = null;
			var downBorderColor = 'yellow';
			
/*			$.ajax([
				type:'post',
				async:true,
				url:'http://192.168.1.104:8001/open-service/web/api/kline/chart/data/4/1/1',
				dataType:'json',
				success:function(result) {
					if(result) {
						for(var i=0;i<result.length;i++){       
                     	names.push(result[i].name);   
                    	}
						for(var i =0;i<result.length;i++){
							nums.push(result[i].num);
						}
					}
				}
			])*/
			  
			 
			
			/*var sto = $.ajax({
				type:"post",
				url:"http://192.168.1.104:8001/open-service/web/api/kline/chart/data/4/1/1",
				async:false
			});
			alert(sto)
			
			$.parseJSON( sto ); //jQuery.parseJSON(jsonstr)*/
			
//			require.config({
//          paths: {
//              echarts1: 'http://192.168.1.104:8001/open-service/web/api/kline/chart/data/4/1/1'
//          }
//			},'json');
			require([
				'echarts',
				'stock-DJI.json'
//				'http://192.168.1.104:8001/open-service/web/api/kline/chart/data/4/1/1'
//				'echarts1'
			], function(echarts, rawData) {

				chart = echarts.init(document.getElementById('main1'), null, {

				});
				panel = document.getElementById('panel1');
				data = splitData(rawData);
				update();

				//              chart.on('click', function (info) {
				//                  if (info.data && info.componentType === 'series') {
				//                      alert([
				//                          'clicked on: ',
				//                          'DATA: ' + info.name,
				//                          'OPEN: ' + info.data[0],
				//                          'CLOSE: ' + info.data[1],
				//                          'LOWEST: ' + info.data[2],
				//                          'HIGHEST: ' + info.data[3],
				//                          'VOLUMN: ' + info.data[4]
				//                      ].join('\n'));
				//                  }
				//              });
			});

			function splitData(rawData) {
			    var categoryData = [];
			    var values = [];
			    var volumes = [];
			     var deas = [];
			    for (var i = 0; i < rawData.length; i++) {
			        categoryData.push(rawData[i].splice(0, 1)[0]);
			        values.push(rawData[i]);			        
			  		 
			        volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
					deas.push(rawData[i][5]);
			    }
			
			    return {
			        categoryData: categoryData,
			        values: values,
			        volumes: volumes,
			        deas:deas
			    };
			}

			function calculateMA(dayCount, data) {
				var result = [];
				for(var i = 0, len = data.values.length; i < len; i++) {
					if(i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for(var j = 0; j < dayCount; j++) {
						sum += data.values[i - j][1];
					}
					result.push(+(sum / dayCount).toFixed(3));
				}
				return result;
			}
		

			function update() {

				//外围字体和颜色
				chart.setOption({
					backgroundColor: '#4c4c7b',
					 textStyle: {
						color: '#fff'
					}, 
					animation: false,
					legend: {
						left: 1,
						data: ['日k', 'MA5', 'MA10', 'MA20', 'MA30'],
						 textStyle: {
							color: '#fff'
						}, 
					},

					//鼠标移动显示信息
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
						},
						hideDelay: 1,
						padding: 10,
						
						 formatter: function(params) {
				            var time  = params[0].name;
				            var kd    = params[0].data;				            
				           
				            var DEA = params[6].data;
				            var ma10 = params[2].data;
				             var ma5	 = params[1].data;
				            var ma20 = params[3].data;
				            var ma30 = params[4].data;
				            var Volumn = params[5].data;
				            var rate = (kd[1]-kd[0])/kd[0]*100;
				            rate = rate > 0 ?( '+'+rate.toFixed(2)):rate.toFixed(2);
				            var html  = `开：${kd[1]} 高：${kd[4]} 收：${kd[2]} 低：${kd[3]} 我:${kd[6]}你:${kd[7]} 他:${kd[8]}  <span class='rate'>涨跌：${rate}%</span>
				            </br><span class="ma5">MA5：${ma5}</span> <span class="ma10">MA10：${ma10}</span> <span class="ma20">MA20：${ma20}</span> <span class="ma30">MA30：${ma30}</span>
				             </br><span class="vol">Volumn：${Volumn}</span> <span class="dea">DEA：${DEA}</span>`
				            return html;
				        }.bind(this)
				        
					},
					   axisPointer: {
				            link: {xAxisIndex: 'all'},
				           
				            label: {
				                backgroundColor: '#443939'
				            }
				        },
					
					  toolbox: {
				            feature: {
				                dataZoom: {
				                    yAxisIndex: false
				                },
				                brush: {
				                    type: ['lineX', 'clear']
				                },
				                
				                
				            }
				        }, 

					//透明框
					brush: {
						xAxisIndex: 'all',
						brushLink: 'all',

						outOfBrush: {

							colorAlpha: 0.9,

						}
					},
				/*	 visualMap: {
				            show: false,
				            seriesIndex: 5,
				            dimension: 2,
				            pieces: [{
				                value: 1,
				                color: downColor,
				               
				            }, {
				                value: -1,
				                color: upColor,
				                 
				            }]
				        },*/
					//调整边缘大小的
					grid: [{
							left: '1%',
							right: '5%',
							height: 330,
							bottom: 105,
							
							
						},
						{
							//调整下面边缘大小的
							left: '1%',
							right: '5%',
							height: 70,
							bottom: 10
						}
					],

			        xAxis: [
			            {
			            	
			                type: 'category',
			                data: data.categoryData,
			                scale: true,
			                show:true,    //显示 日期
			                boundaryGap : false,
			                
			                globalCoord: true,
			                axisLine: {onZero: true},
			                splitLine: {show: false},
			                axisTick: {show: true},
			                axisLabel: {show: true},
			                splitNumber: 20,
			                min: 'dataMin',
			                max: 'dataMax',
			                axisPointer: {
			                    z: 10
			                }
			            },
			            {
			            	
			                type: 'category',
			                gridIndex: 1,
			                data: data.categoryData,
			                scale: true,
			                boundaryGap : false,
			                globalCoord: false,
			                axisLine: {onZero: false},
			                axisTick: {show: false},
			                splitLine: {show: false,},
			                axisLabel: {show: false},
			                splitNumber: 20,
			                min: 'dataMin',
			                max: 'dataMax'
			                // axisPointer: {
			                //     label: {
			                //         formatter: function (params) {
			                //             var seriesValue = (params.seriesData[0] || {}).value;
			                //             return params.value
			                //             + (seriesValue != null
			                //                 ? '\n' + echarts.format.addCommas(seriesValue)
			                //                 : ''
			                //             );
			                //         }
			                //     }
			                // }
			            }
			        ],
			        yAxis: [
			           /* {
			                scale: true,
			                splitArea: {  //背景色
			                    show: false,
			                     position: 'right'
			              //  }
			            },*/
					{
					        scale: true,
					        splitLine:{    //   去除网格线
					        	show:true,
					        	lineStyle:{  
					                 
					                    color:'#4c4b4b ',  
					                    } 
					        },
					        
					        
					        axisLine:{
					               lineStyle:{  
					                 
					                    color:'#3c3a3a',  
					                    }  
					        },
					        position: 'right'
					   },
			            {
			                scale: true,
			                gridIndex: 1,
			                splitNumber: 2,
			                axisLabel: {show: false},
			                axisLine: {show: false},
			                axisTick: {show: false},
			                splitLine: {show: false}
			            }
			        ],
					dataZoom: [
						//放大缩小的
						{
							type: 'inside',
							xAxisIndex: [0, 1],
							start: 94,
							end: 100

						},

						{
							//显示放大缩小的进度条
							show: false,
							xAxisIndex: [0, 1],
							type: 'slider',
							bottom: 10,
							start: 94,
							end: 100,
						},
						

					],
					series: [{
							name: '日k',
							type: 'candlestick',
							
							data: data.values,
							itemStyle: {
			                    normal: {
			                        color: upColor,
			                        
			                        color0: downColor,
			                        borderColor: downBorderColor,
			                        borderColor0: upBorderColor
			                    }
			                },
		 					tooltip: {
		 						show:true,
		 						trigger:'axis',
//		 						axusPointer:{
//		 							type:'cross',
//		 							snap:true,
//		 						}
								/*formatter: function(param) {
									
									var param = param[0];
									return [
										'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
										'Open: ' + param.data[0] + '<br/>',
										'Close: ' + param.data[1] + '<br/>',
										'Lowest: ' + param.data[2] + '<br/>',
										'Highest: ' + param.data[3] + '<br/>',
										
										
									].join('')
								},*/
								    formatter: function (params) {//鼠标在k线上显示的模态框
                            var res = params[0].seriesName + ' ' + params[0].name;
                            res += '<br/>  开盘 : ' + params[0].value[1];
                            res += '<br/>  最高 : ' + params[0].value[3];
                            res += '<br/>  收盘 : ' + params[0].value[2];
                            res += '<br/> 最低 : ' + params[0].value[4];
                            return res;
                        },
							}
						},
						{ 
							name: 'MA5',
							type: 'line',
							data: calculateMA(5, data),
							symbol: 'none', //去掉小圆点
							color: '#fff',
							smooth: true,
							lineStyle: {
								normal: {
									opacity: 0.9,
									 width: 1
								}
							}
						},
						{
							name: 'MA10',
							type: 'line',
							data: calculateMA(10, data),
							symbol: 'none', //去掉小圆点
							color:'#5858fd',
							smooth: true,
							lineStyle: {
								normal: {
									opacity: 0.9,
									 width: 1
								}
							}
						},
						{
							name: 'MA20',
							type: 'line',
							data: calculateMA(20, data),
							symbol: 'none', //去掉小圆点
							smooth: true,
							color:'#f4abf5',
							lineStyle: {
								normal: {
									opacity: 0.9,
									 width: 1
								}
							}
						},
						{
							name: 'MA30',
							type: 'line',
							data: calculateMA(30, data),
							symbol: 'none', //去掉小圆点
							smooth: true,
							color:'#c5f10a',
							lineStyle: {
								normal: {
									opacity: 0.9,
									 width: 1
								}
							}
						},
					

						//显示下面的山图
						{
							name: 'Volumn',
							type: 'bar',
							width:1,
							xAxisIndex: 1,
							yAxisIndex: 1,
							data: data.volumes,
						       itemStyle: {
						    	  normal: {
							          color: function(params) {
							              var colorList;
							             
							              if (data.values[params.dataIndex][1]>data.values[params.dataIndex][0]) {
							                  colorList = '#bbe657';						                  		                       
							              } else {
							                  colorList = 'red';
							                  borderColor : 'none';
							              }
							              return colorList;
							          },
								      
							          	 /*borderColor:"yellow"*/
							         
							           
							      }
						    	  
						      }
						},{
				          name: 'DEA',
				          type: 'line',
				          xAxisIndex: 1,
				          yAxisIndex: 1,
				          data: data.deas
				      }
										
					]
				},true);

				/* chart.on('brushSelected', renderBrushed); */

 				/*function renderBrushed(params) {
					var sum = 0;
					var min = Infinity;
					var max = -Infinity;
					var countBySeries = [];
					var brushComponent = params.batch[0];

					var rawIndices = brushComponent.selected[0].dataIndex;
					for(var i = 0; i < rawIndices.length; i++) {
						var val = data.values[rawIndices[i]][1];
						sum += val;
						min = Math.min(val, min);
						max = Math.max(val, max);
					}

					//                  panel.innerHTML = [
					//                      '<h3>STATISTICS:</h3>',
					//                      'SUM of open: ' + (sum / rawIndices.length).toFixed(4) + '<br>',
					//                      'MIN of open: ' + min.toFixed(4) + '<br>',
					//                      'MAX of open: ' + max.toFixed(4) + '<br>'
					//                  ].join(' ');

				} */

				/* chart.dispatchAction({
					type: 'brush',
					areas: [

						{
							brushType: 'lineX',
							//控制默认透明框大小
							coordRange: ['2016-05-12', '2016-06-20'],
							xAxisIndex: 0
						}
					]
				}); */
			}
		
	</script>
	
    <script type="text/javascript">
/*   		 function getAjaxData(pid){
    	var options = myChart.getOption();
    	$.getJSON("http://localhost:8000/app/v1/historys/?format=json&pid="+pid, function(data){
       	 for(var i=0;i<5;i++){
       		 data[i]=data.objects[i].data.number;
       	 }
       	 options.series[0].data=data;
            myChart.setOption(options); 
        });
    }*/
   $('.date > div').click(function(){
   	 $('.xrp').removeClass('xrp');
   	$(this).addClass('xrp');
  
   })
   
     $('.bxe > div').click(function(){
   	 $('.xrp1').removeClass('xrp1');
   	$(this).addClass('xrp1');
  
   })
</script>
	<script type="text/javascript">
			$.fn.iVaryVal = function(iSet, CallBack) {
				iSet = $.extend({
					Minus: $('.J_minus'),
					Add: $('.J_add'),
					Input: $('.J_input'),
					Min: 0,
					Max: 10000
				}, iSet);
				var C = null,
					O = null;
				var $CB = {};
				iSet.Add.each(function(i) {
					$(this).click(function() {
						O = parseInt(iSet.Input.eq(i).val());
						(O + 1 <= iSet.Max) || (iSet.Max == null) ? iSet.Input.eq(i).val(O + 1): iSet.Input.eq(i).val(iSet.Max);
						//输出当前改变后的值
						$CB.val = iSet.Input.eq(i).val();
						$CB.index = i;
						//回调函数
						if(typeof CallBack == 'function') {
							CallBack($CB.val, $CB.index);
						}
					});
				});

				iSet.Minus.each(function(i) {
					$(this).click(function() {
						O = parseInt(iSet.Input.eq(i).val());
						O - 1 < iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O - 1);
						$CB.val = iSet.Input.eq(i).val();
						$CB.index = i;
						//回调函数
						if(typeof CallBack == 'function') {
							CallBack($CB.val, $CB.index);
						}
					});
				});
			}
			$(function() {

				$('.i_box').iVaryVal({}, function(value, index) {
					$('.i_tips').html('：' + index + '；：' + value);
				});
			});
		</script>

	</body>

</html>